<template>
  <div class="dashboard-container">
    <el-card shadow="never">
      <el-row justify="space-between">
        <el-col :span="18" :xs="24">
          <div class="flex h-full items-center">
            <img
              class="w-20 h-20 mr-5 rounded-full"
              :src="
                userStore.user.avatar ? userStore.user.avatar : defaultAvatar
              "
            />
            <div>
              <p>{{ greetings }}</p>
              <p class="text-sm text-gray">今日又是新的一天。</p>
            </div>
          </div>
        </el-col>

        <el-col :span="6" :xs="24">
          <div class="flex h-full items-center justify-around">
            <el-statistic
              v-for="(item, index) in consultationData"
              :key="index"
              :value="item.num"
            >
              <template #title>
                <div class="flex items-center">
                  <svg-icon
                    v-if="item.serviceStatus == '服务中'"
                    icon-class="todo"
                    size="20px"
                  />
                  <svg-icon v-else icon-class="project" size="20px" />
                  <span class="text-[16px] ml-1">{{ item.serviceStatus }}</span>
                </div>
              </template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-row :gutter="10" class="mt-5">
      <el-col
        :xs="24"
        :sm="12"
        :lg="6"
        v-for="(item, index) in orderData"
        :key="index"
      >
        <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
          <template #template>
            <el-card>
              <template #header>
                <div>
                  <el-skeleton-item variant="h3" style="width: 40%" />
                  <el-skeleton-item
                    variant="rect"
                    style="float: right; width: 1em; height: 1em"
                  />
                </div>
              </template>

              <div class="flex-x-between">
                <el-skeleton-item variant="text" style="width: 30%" />
                <el-skeleton-item
                  variant="circle"
                  style="width: 2em; height: 2em"
                />
              </div>
              <div class="mt-5 flex-x-between">
                <el-skeleton-item variant="text" style="width: 50%" />
                <el-skeleton-item variant="text" style="width: 1em" />
              </div>
            </el-card>
          </template>
          <template v-if="!visitStatsLoading">
            <el-card shadow="never">
              <template #header>
                <div class="flex-x-between">
                  <span class="text-[var(--el-text-color-secondary)]">
                    {{ item.orderType }}
                  </span>
                  <el-tag
                    v-if="item.orderType == '在线咨询'"
                    type="danger"
                    size="small"
                  >
                    日
                  </el-tag>
                  <el-tag
                    v-else-if="item.orderType == '文书编写'"
                    type="primary"
                    size="small"
                  >
                    日
                  </el-tag>
                  <el-tag
                    v-else-if="item.orderType == '电话咨询'"
                    type="success"
                    size="small"
                  >
                    日
                  </el-tag>
                  <el-tag
                    v-else-if="item.orderType == '线下预约'"
                    type="warning"
                    size="small"
                  >
                    日
                  </el-tag>
                </div>
              </template>

              <div class="flex-x-between mt-2">
                <div class="flex-y-center">
                  <span class="text-lg">{{ item.payAmount }}</span>
                </div>
                <svg-icon
                  v-if="item.orderType == '在线咨询'"
                  icon-class="user"
                  size="2em"
                />
                <svg-icon
                  v-else-if="item.orderType == '文书编写'"
                  icon-class="ip"
                  size="2em"
                />
                <svg-icon
                  v-else-if="item.orderType == '电话咨询'"
                  icon-class="uv"
                  size="2em"
                />
                <svg-icon
                  v-else-if="item.orderType == '线下预约'"
                  icon-class="pv"
                  size="2em"
                />
              </div>
            </el-card>
          </template>
        </el-skeleton>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mt-5">
      <el-col :xs="24" :span="16">
        <VisitTrend
          id="VisitTrend"
          width="100%"
          height="400px"
          @update-dated="updateDate"
        />
      </el-col>
      <el-col :xs="24" :span="8">
        <el-card>
          <template #header>
            <div class="flex-x-between">
              <div class="flex-y-center">
                通知公告
                <el-icon class="ml-1"><Notification /></el-icon>
              </div>
              <!-- <el-link type="primary">
                <span class="text-xs">查看更多</span>
                <el-icon class="text-xs"><ArrowRight /></el-icon>
              </el-link> -->
            </div>
          </template>

          <!-- <el-scrollbar height="400px">
            <div
              v-for="(item, index) in notices"
              :key="index"
              class="flex-y-center py-3"
            >
              <el-tag :type="getNoticeLevelTag(item.level)" size="small">
                {{ getNoticeLabel(item.type) }}
              </el-tag>
              <el-text
                truncated
                class="!mx-2 flex-1 !text-xs !text-[var(--el-text-color-secondary)]"
              >
                {{ item.title }}
              </el-text>
              <el-link>
                <el-icon class="text-sm"><View /></el-icon>
              </el-link>
            </div>
          </el-scrollbar> -->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});

import dashboardAPI, {
  DashboardQuery,
  DashboardOrderVO,
  DashboardConsultationVO,
} from "@/api/dashboard";

import { useUserStore } from "@/store/modules/user";
const userStore = useUserStore();

/** 默认头像 */
const defaultAvatar = ref(
  new URL(`../../assets/images/default-avatar.png`, import.meta.url).href
);
const date: Date = new Date();
const greetings = computed(() => {
  const hours = date.getHours();
  if (hours >= 6 && hours < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (hours >= 8 && hours < 12) {
    return "上午好，" + userStore.user.userInfo.name + "！";
  } else if (hours >= 12 && hours < 18) {
    return "下午好，" + userStore.user.userInfo.name + "！";
  } else if (hours >= 18 && hours < 24) {
    return "晚上好，" + userStore.user.userInfo.name + "！";
  } else {
    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
  }
});

// 右上角服务单数据
const consultationData = reactive<DashboardConsultationVO[]>([]);
// 中间订单数据
const orderData = reactive<DashboardOrderVO[]>([]);
// 中间占位图
const visitStatsLoading = ref(true);

/** 首页时间参数 */
const dashboardData = reactive<DashboardQuery>({
  startTime: "2024-10-01",
  endTime: "2024-10-07",
});
const updateDate = (val: any) => {
  Object.assign(dashboardData, val);
  loadVisitStatsData();
};
/** 加载访问统计数据 */
const loadVisitStatsData = async () => {
  dashboardAPI.getDashboardOrder(dashboardData).then((res) => {
    Object.assign(orderData, res);
    visitStatsLoading.value = false;
  });
  dashboardAPI.getDashboardConsultation(dashboardData).then((res) => {
    Object.assign(consultationData, res);
  });
};

/** 通知公告列表 */
const notices = ref([
  // {
  //   level: 2,
  //   type: NoticeTypeEnum.SYSTEM_UPGRADE,
  //   title: "v2.12.0 新增系统日志，访问趋势统计功能。",
  // },
]);
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }
}
</style>
